<template>
  <div class="Equ">
    <div class="equ-con">
      <div class="equ-title">
        <div class="equ-num">{{item.number}}</div>
        <span class="txt">{{item.name}}</span>
      </div>
      <div class="equ-loading">
        <img class="doRotate" src="~assets/img/loading.png">
      </div>
      <div class="equ-status" :class="{'on-line': item.status == 0}"></div>
      <div class="power-box">
        <div class="power-bar" :style="powerStyle"></div>
      </div>
      <div class="equ-Progress">
        <div class="pro-bar" :style="barStyle"></div>
      </div>
    </div>
    
  </div>
</template>

<script>
export default {
  props: {
    item: {
      type: Object,
      default: {}
    },
    per: {
      type: Number,
      default: 0 
    },
    power: {
      type: Number,
      default: 0 
    },
  },
  data() {
    return {
      
    }
  },
  computed: {
    barStyle() {
      return {
        width: `${this.per}%`
      }
    },
    powerStyle() {
      return {
        width: `${this.power}%`
      }
    }
  },
  created () {

  },
}
</script>

<style lang="stylus">
.Equ {
  position: relative;
  .equ-con {
    position: relative;
    width: getPx(220);
    box-shadow: 0 getPx(3) getPx(6) 0 rgba(0, 0, 0, 0.1);
    .equ-title {
      width: getPx(220);
      height: getPx(46);
      background: $equ-bg;
      position: relative;
      flexMiddle(center);
      .equ-num {
        position: absolute;
        top: 50%;
        left: getPx(11);
        transform: translate(0, -50%);
        width: getPx(32);
        height: getPx(32);
        border-radius: 50%;
        background: $white;
        color: $primary;
        font-size: $base-font-size;
        flexMiddle(center);
      }
    }
    .equ-loading {
      width: getPx(18);
      height: getPx(18);
      position: absolute;
      top: 50%;
      right: getPx(46);
      transform: translate(0, -50%);
      img {
        width: 100%;
        height: 100%;
      }
    }
    .equ-status {
      width: getPx(6);
      height: getPx(6);
      border-radius: 50%;
      position: absolute;
      top: getPx(5);
      right: getPx(10);
      &.on-line {
        background: $normal;
      }
    }
    .power-box {
      width: getPx(10);
      height: getPx(6);
      background-color: $white;
	    border-radius: 1px;
      border: 1px solid $primary; 
      position: absolute;
      top: getPx(4);
      right: getPx(30);
      .power-bar {
        height: 100%;
        position: absolute;
        bottom: 0;
        left: 0;
        background: $primary;
      } 
    }
    .equ-Progress {
      width: 100%;
      height: getPx(3);
      position: absolute;
      left: 0;
      bottom: 0;
      background: $white;
      .pro-bar {
        height: 100%;
        position: absolute;
        left: 0;
        bottom: 0;
        background: $progress-bg;
      }
    }
  }
  
}
</style>